<template>
    <div id="else">
        <van-tree-select :items="items" :main-active-index.sync="active" id="product" height="36.1875rem">
            <template #content>

                <div id="model" v-if="active === 0">
                    <span>笔记本电脑</span>
                    <figure  v-for="(v, index) in list" :key="index+'a'">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>


                <div id="model" v-if="active === 1">
                    <span>手机新品</span>
                    <figure v-for="(v, index) in recommed" :key="index+'1'">
                        <img :src="v.url" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 2">
                    <span>老用户专享</span>
                    <figure v-for="(v, index) in customer" :key="index+'2'">
                        <img :src="v.src" alt="" >
                        <p>{{ v.name }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 3">
                    <span>Magic系列</span>
                    <figure v-for="(v, index) in recommed" :key="index+'1'">
                        <img :src="v.url" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                    <span>数字系列</span>
                    <figure v-for="(v, index) in customer" :key="index+'2'">
                        <img :src="v.src" alt="" >
                        <p>{{ v.name }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 4">
                    <span>双11预售</span>
                    <figure v-for="(v, index) in list" :key="index+'a'">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                    <span>数字系列</span>
                    <figure v-for="(v, index) in list" :key="index+'b'">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 5">
                    <span>平板</span>
                    <figure v-for="(v, index) in list" :key="index">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 6">
                    <span>手表</span>
                    <figure v-for="(v,index) in watch" :key="index-6" @click="watchone(index)">
                        <img :src="v.src" alt="">
                        <p>{{v.name}}</p>
                    </figure>
                    <span>手环</span>
                    <figure v-for="(v,index) in shouhuan" :key="index">
                        <img :src="v.src" alt="">
                        <p>{{v.name}}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 7">
                    <span>智慧屏</span>
                    <figure v-for="(v, index) in list" :key="index-7">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 8">
                    <span>智能路由</span>
                    <figure v-for="(v, index) in list" :key="index-8">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 9">
                    <span>耳机音箱分类</span>
                    <figure v-for="(v, index) in list" :key="index-9">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 10">
                    <span>荣耀亲选</span>
                    <figure v-for="(v, index) in list" :key="index-10">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 11">
                    <span>配件</span>
                    <figure v-for="(v, index) in list" :key="index-11">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>

                <div id="model" v-if="active === 12">
                    <span>增值保障</span>
                    <figure v-for="(v, index) in list" :key="index-12">
                        <img :src="v.src" alt="">
                        <p>{{ v.title }}</p>
                    </figure>
                </div>
            </template>
        </van-tree-select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: 0,

            items: [{ text: '双11预售' }, { text: '新品推荐' }, { text: '老用户专享' }, { text: '手机' }, { text: '笔记本' }, { text: '平板' }, { text: '智能穿戴' }, { text: '智慧屏' }, { text: '路由' }, { text: '耳机音箱' }, { text: '生态产品' }, { text: '配件' }, { text: '售后服务' }],

            list: [],
            recommed:[],
            watch:[],
            shouhuan:[],
            customer:[]
        };
    },
    mounted() {
        this.$http({
            url: "  http://localhost:3000/shuang11yushou",
            method: "GET"
        }).then((res) => {
            this.list = res.data;
        }),
        this.$http({
            url: "  http://localhost:3000/newrecommed",
            method: "GET"
        }).then((res) => {
            this.recommed = res.data;
        }),
        this.$http({
            url: " http://localhost:3000/watch",
            method: "GET"
        }).then((res) => {
            this.watch = res.data;
        }),
        this.$http({
            url: "  http://localhost:3000/shouhuan",
            method: "GET"
        }).then((res) => {
            this.shouhuan = res.data;
        }),
        this.$http({
            url: "   http://localhost:3000/oldcustomer",
            method: "GET"
        }).then((res) => {
            this.customer = res.data;
        })
    },
    methods:{
        watchone(index){
            switch(index){
                case 0 :
                    this.$router.push("/mydetails")
            }  
        }
    }
};
</script>

<style lang="scss" scoped>
#else {
    width: 100%;
}

#model {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
}

figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    height: 6.875rem;
    padding: .5rem 0;
}

img {
    width: 3.125rem;
    height: 3.125rem;
}

p {
    box-sizing: border-box;
    width: 4.1662rem;
    font-size: .75rem;
    text-align: center;
    margin-top: .75rem;
    display:-webkit-box;
    overflow: hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

span {
    display: block;
    width: 100%;
    height: 2.625rem;
    line-height: 3.125rem;
    text-align: center;
    font-size: .875rem;
    color:#333333;
}
</style>